<template>
  <div class="app-container">
    <div class="no" v-if="nothing">暂无相关信息...</div>
    <div class="show" v-else>
      <div class="parent" v-if="parent * 1 > 0">
        <span>上级:</span>
        <el-input class="i" v-model="parent" style="width: 100px" @change="changeParent()" />
        <span style="color: #cccccc" @click="goNode(parent)">跳转</span>
      </div>
      <div class="parent" v-else>
        <span>上级:</span>
        <el-input class="i" v-model="parent" style="width: 100px" @change="changeParent()" />
        <span style="color: #cccccc" @click="goNode(parent)">跳转</span>
      </div>
      <div class="user">
        <div class="id">用户: {{user}}</div>
        <div class="t">团队人数: {{info.team_count}} [排位]</div>
        <div class="my">个人订单: {{info.my_order}}, 业绩: ￥{{+info.my}}</div>
        <div class="my">团队订单: {{info.team_order}}, 业绩: ￥{{+info.team_x}}</div>
        <div class="pv">PV: {{info.pv}}</div>
        <div class="layer">层次: {{info.layer}}</div>
        <div class="x" v-if="info.is_left == 1">左</div>
        <div class="x" v-if="info.is_right == 1">右</div>
      </div>
      <div class="child">
        <div class="left" v-if="left * 1 > 0">
          <span>左边:</span>
          <!--<el-input class="i" v-model="left" style="width: 100px" @change="changeLeft()" />-->
          <span class="t">{{left}}</span>
          <span style="color: #000000" @click="goNode(left)">跳转</span>
        </div>
        <div class="left" v-else>无</div>
        <div class="left" v-if="right * 1 > 0">
          <span>右边:</span>
          <!--<el-input class="i" v-model="right" style="width: 100px" @change="changeRight()" />-->
          <span class="t">{{right}}</span>
          <span style="color: #000000" @click="goNode(right)">跳转</span>
        </div>
        <div class="right" v-else>无</div>
      </div>
      <div class="text">点击[上级, 左边, 右边]跳转, 可以跳转对应节点</div>
      <div class="text">只能修改父节点, 改子节点, 可能出现左右重复[甚至出现多个节点]!!! </div>
    </div>
  </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'MemberTeam',
  components: {
  },
  data() {
    return {
      user: 0,
      left: 0,
      right: 0,
      parent: 0,
      nothing: false,
      info: {}
    }
  },
  methods: {
    goNode(id) {
      this.$router.push(`/member/paix/${id}`)
    },
    getAll() {
      api.member.getPengUser({ id: this.$route.params.id }).then(response => {
        const { data } = response
        console.log(data)
        if (data.user_id) {
          this.user = data.user_id
          this.left = data.left_id
          this.right = data.right_id
          this.parent = data.parent_id
          // 其它信息
          this.info = data
        } else {
          this.nothing = true
        }
      })
    },
    changeParent() {
      api.member.changeNode({
        id: this.user,
        parent: this.parent,
        left: this.left,
        right: this.right,
        type: 'parent'
      }).then(() => {
        this.$message.success('操作成功')
      })
    },
    changeLeft() {
      api.member.changeNode({
        id: this.user,
        parent: this.parent,
        left: this.left,
        right: this.right,
        type: 'left'
      }).then(() => {
        this.$message.success('操作成功')
      })
    },
    changeRight() {
      api.member.changeNode({
        id: this.user,
        parent: this.parent,
        left: this.left,
        right: this.right,
        type: 'right'
      }).then(() => {
        this.$message.success('操作成功')
      })
    },
  },
  mounted() {
    // this.fetchData()
    this.getAll()
  }
}
</script>

<style scoped lang="scss">
.t {
  color: white;
  margin-right: 10px;
}
.parent, .left, .right {
  display: flex;
  justify-content: center;
  .i {
    margin: 0 10px;
  }
}
.no {
  margin: 10px;
}
.show {
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .parent, .left, .right {
    height: 80px;
    line-height: 80px;
    width: 200px;
    text-align: center;
    //border: 1px solid #333333;
    border-radius: 5px;
    margin-top: 30px;
    cursor: pointer;
  }
  .child {
    border: none;
    margin-top: 0;
    display: flex;
    width: 100%;
    justify-content: center;
    cursor: auto;
    .left {
      margin-right: 50px;
    }
    .left, .right {
      background: #52ae46;
    }
  }
  .user {
    background: #308f24;
    color: white;
    border-color: red;
    margin-top: 20px;
    padding: 10px;
    border-radius: 10px;
    width: 260px;
    div {
      margin: 10px 0;
    }
  }
  .text {
    margin-top: 50px;
    border: none;
    background: none;
    color: red;
    font-size: 20px;
    text-align: center;
  }
  .parent {
    background: #185d0f;
    color: white;
  }
}
</style>
